import React from 'react';
import { Card, Row, Col, Statistic, Avatar, List, Button, Space, Tag } from 'antd';
import { TeamOutlined, UserOutlined, TrophyOutlined, CalendarOutlined } from '@ant-design/icons';

const TeamManagement: React.FC = () => {
  const teamStats = [
    {
      title: '团队成员',
      value: 12,
      icon: <TeamOutlined />,
      color: '#1890ff',
    },
    {
      title: '在线成员',
      value: 8,
      icon: <UserOutlined />,
      color: '#52c41a',
    },
    {
      title: '完成项目',
      value: 24,
      icon: <TrophyOutlined />,
      color: '#fa8c16',
    },
    {
      title: '进行中项目',
      value: 6,
      icon: <CalendarOutlined />,
      color: '#722ed1',
    },
  ];

  const teamMembers = [
    {
      id: 1,
      name: '张三',
      role: '项目经理',
      avatar: 'https://xsgames.co/randomusers/avatar.php?g=pixel&key=1',
      status: 'online',
      projects: 5,
      lastActive: '刚刚',
    },
    {
      id: 2,
      name: '李四',
      role: '前端开发',
      avatar: 'https://xsgames.co/randomusers/avatar.php?g=pixel&key=2',
      status: 'online',
      projects: 3,
      lastActive: '5分钟前',
    },
    {
      id: 3,
      name: '王五',
      role: '后端开发',
      avatar: 'https://xsgames.co/randomusers/avatar.php?g=pixel&key=3',
      status: 'offline',
      projects: 4,
      lastActive: '1小时前',
    },
    {
      id: 4,
      name: '赵六',
      role: 'UI设计师',
      avatar: 'https://xsgames.co/randomusers/avatar.php?g=pixel&key=4',
      status: 'online',
      projects: 2,
      lastActive: '30分钟前',
    },
  ];

  const recentProjects = [
    {
      id: 1,
      name: '管理系统重构',
      progress: 75,
      status: '进行中',
      team: ['张三', '李四', '王五'],
      deadline: '2024-02-01',
    },
    {
      id: 2,
      name: '移动端开发',
      progress: 45,
      status: '进行中',
      team: ['李四', '赵六'],
      deadline: '2024-02-15',
    },
    {
      id: 3,
      name: '数据分析平台',
      progress: 100,
      status: '已完成',
      team: ['张三', '王五'],
      deadline: '2024-01-10',
    },
  ];

  return (
    <div>
      <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
        {teamStats.map((stat, index) => (
          <Col xs={24} sm={12} md={6} key={index}>
            <Card>
              <Statistic
                title={stat.title}
                value={stat.value}
                prefix={stat.icon}
                valueStyle={{ color: stat.color }}
              />
            </Card>
          </Col>
        ))}
      </Row>

      <Row gutter={[16, 16]}>
        <Col xs={24} lg={12}>
          <Card title="团队成员" extra={<Button type="primary">添加成员</Button>}>
            <List
              dataSource={teamMembers}
              renderItem={(member) => (
                <List.Item
                  actions={[
                    <Button type="link" size="small">
                      查看
                    </Button>,
                    <Button type="link" size="small">
                      编辑
                    </Button>,
                  ]}
                >
                  <List.Item.Meta
                    avatar={
                      <Avatar src={member.avatar} icon={<UserOutlined />} />
                    }
                    title={
                      <Space>
                        {member.name}
                        <Tag color={member.status === 'online' ? 'green' : 'default'}>
                          {member.status === 'online' ? '在线' : '离线'}
                        </Tag>
                      </Space>
                    }
                    description={
                      <Space>
                        <span>{member.role}</span>
                        <span>·</span>
                        <span>{member.projects} 个项目</span>
                        <span>·</span>
                        <span>最后活跃: {member.lastActive}</span>
                      </Space>
                    }
                  />
                </List.Item>
              )}
            />
          </Card>
        </Col>

        <Col xs={24} lg={12}>
          <Card title="最近项目" extra={<Button>查看全部</Button>}>
            <List
              dataSource={recentProjects}
              renderItem={(project) => (
                <List.Item
                  actions={[
                    <Button type="link" size="small">
                      详情
                    </Button>,
                  ]}
                >
                  <List.Item.Meta
                    title={
                      <Space>
                        {project.name}
                        <Tag
                          color={
                            project.status === '进行中'
                              ? 'processing'
                              : project.status === '已完成'
                              ? 'success'
                              : 'default'
                          }
                        >
                          {project.status}
                        </Tag>
                      </Space>
                    }
                    description={
                      <div>
                        <div style={{ marginBottom: 8 }}>
                          进度: {project.progress}%
                        </div>
                        <div>
                          截止日期: {project.deadline}
                        </div>
                        <div style={{ marginTop: 8 }}>
                          <span style={{ color: '#999' }}>团队成员: </span>
                          {project.team.join(', ')}
                        </div>
                      </div>
                    }
                  />
                </List.Item>
              )}
            />
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default TeamManagement;